<template>
  <div>
    <!-- 菜单列表区 -->
    <el-table
      style="margin: 20px"
      border
      :data="permissionList"
      row-key="id"
      :expand-row-keys="expands"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="code" label="权限值"> </el-table-column>
      <el-table-column prop="address" label="跳转权限值"> </el-table-column>
      <el-table-column prop="" label="操作">
        <template v-slot="{ row }">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            title="添加菜单"
            @click="isShowAddPermiseeion(row)"
            v-has="`btn.Permission.add`"
            :disabled="row.level == 4"
          ></el-button>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            title="编辑菜单"
            v-has="`btn.Permission.update`"
            :disabled="!row.code"
            @click="upDataPermission(row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            title="删除菜单"
            v-has="`btn.Permission.remove`"
            :disabled="!row.code"
            @click="removePermission(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加菜单区域 -->
    <el-dialog title="添加菜单" :visible.sync="isShowAddPermission">
      <el-form :model="permissionFrom" :rules="rules" ref="permissionRef">
        <el-form-item label="名称" label-width="120px" prop="name">
          <el-input autocomplete="off" v-model="permissionFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="功能权限值" label-width="120px" prop="code">
          <el-input size="normal" v-model="permissionFrom.code"></el-input>
        </el-form-item>
        <el-form-item
          label="跳转路由权限值"
          label-width="120px"
          v-if="permissionFrom.level == 2"
        >
          <el-input
            v-model="permissionFrom.toCode"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addPermission">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入请求
import {
  asyncGetPermissionList,
  asyncAddPermission,
  asyncUpDataPermission,
  asyncDeletePermission,
} from "@/api/acl/permission";
// 引入ui
import { Message } from "element-ui";
// 引入深拷贝函数
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "Permission",
  data() {
    return {
      // 菜单数据的列表
      permissionList: [],
      // 展开的格式
      expands: [],
      // 控制添加菜单对话框的显示与隐藏
      isShowAddPermission: false,
      // 收集表单的数据
      permissionFrom: {
        name: "",
        code: "",
        toCode: "",
        level: 1,
        pid: "",
        type: 1,
        id: "",
      },
      // 表单校验规则
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入权限值", trigger: "blur" }],
      },
      // 标记发送添加请求还是修改请求
      isAddOrUpData: 0,
    };
  },
  methods: {
    // 请求菜单列表的功能函数
    async getPermissionList() {
      try {
        let res = await asyncGetPermissionList();
        // console.log(res);
        this.permissionList = res.data.children;
        this.expands = res.data.children.forEach((item) => {
          this.expands.push(item.id);
        });
      } catch (error) {
        console.log(error);
      }
    },
    // 控制弹出添加对话框的回调
    isShowAddPermiseeion(row) {
      console.log(row);
      this.isShowAddPermission = true;
      this.permissionFrom.name = "";
      this.permissionFrom.code = "";
      this.permissionFrom.toCode = "";
      this.permissionFrom.level = row.level === 3 ? 2 : 1;
      this.permissionFrom.pid = row.id;
      this.permissionFrom.type = row.type + 1;
    },
    // 添加菜单的回调
    async addPermission() {
      this.$refs.permissionRef.validate(async (vid) => {
        if (vid) {
          try {
            if (this.permissionFrom.id) {
              await asyncUpDataPermission(this.permissionFrom);
              this.isAddOrUpData = 1;
            } else {
              await asyncAddPermission(this.permissionFrom);
              this.isAddOrUpData = 0;
            }
            Message.success(this.isAddOrUpData ? "修改成功" : "添加成功");
            this.isShowAddPermission = false;
            this.getPermissionList();
          } catch (error) {
            Message.error(!this.isAddOrUpData ? "修改失败" : "添加失败");
            console.log(error);
          }
        } else {
          return false;
        }
      });
    },
    // 取消添加的回调
    cancel() {
      this.isShowAddPermission = false;
      Message.warning("取消添加");
    },
    // 编辑的回调
    async upDataPermission(row) {
      this.isShowAddPermission = true;
      this.permissionFrom = cloneDeep(row);
    },
    // 点击删除的回调
    removePermission(row) {
      this.$confirm(`确定要删除${row.name}吗?`, "确认删除吗", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            let res = await asyncDeletePermission(row.id);
            console.log(res);
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getPermissionList();
          } catch (error) {
            console.log(error);
          }
        })
        .catch(() => {
          this.$message({
            type: "wangin",
            message: "取消删除",
          });
        });
    },
  },
  mounted() {
    this.getPermissionList();
  },
};
</script>

<style>
</style>